<template>
  <div class="con">
    <!-- 内容 -->
    <div class="content">
      <!-- 左侧图表 -->
      <div class="conLeft">
        <!-- 频谱图 -->
        <div class="spectrum">
          <div class="title">故障对比图</div>
          <!-- 下拉模型选择 -->
          <div class="chooseModel">
            <div class="model">
              <a-select class="my-select" style="" v-model="modelName">
                <a-select-option
                  v-for="(item,idex) in modelList"
                  :key="idex"
                  :value="item.modelFile"
                  @click="getException(item)">{{ item.faultName }}
                </a-select-option>
              </a-select>
            </div>
            <div class="modelTime">{{ errorTime }}</div>
          </div>
          <div class="wave" id="spectrum">
          </div>
        </div>
      </div>
      <!-- 中部图表 -->
      <div class="conCenter">
        <div class="quantity">
          <div class="title">{{ audioTitle }}</div>
          <div style="display: flex" class="modelPlay">
            <div class="play" @click="faultPlay()">模型播放</div>
            <a-divider type="vertical"/>
            <div class="play" @click="paly()">检材播放</div>
          </div>
          <div id="waveform" ref="waveform" v-show="false">
            <!-- Here be the waveform -->
          </div>
          <div class="audioCanvas">
            <canvas width="800" height="150" id="canvas"></canvas>
          </div>
        </div>
      </div>
      <!-- 右侧图表 -->
      <div class="conRight">
        <!-- XXXX图 -->
        <div class="chartXXX">
          <div class="title">语谱图</div>
          <div class="container">
            <spectrogram container="spectrogram" :spectrogramData="spectrogramData" ></spectrogram>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="wrapper">
      <div class="wave-information">
        <div class="info-window">
          <div class="header">
            <div class="icon one"></div>
            <div class="text">{{ errName+'(检材)'||'未知故障' }}</div>
          </div>
          <div class="list">
            <div class="table">
              <div class="item">
                <div class="cell">中心频率（Hz）</div>
                <div class="cell">带宽（Hz）</div>
                <div class="cell">强度（Db）</div>
              </div>
              <div class="item" v-for="(item, index) in logList" :key="index">
                <div class="cell">{{ item.center }}</div>
                <div class="cell">{{ item.width }}</div>
                <div class="cell">{{ item.db }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-window">
          <div class="header">
            <div class="icon two"></div>
            <div class="text">{{ faultName+'(模型)'||'' }}</div>
          </div>
          <div class="list">
            <div class="table">
              <div class="item">
                <div class="cell">中心频率（Hz）</div>
                <div class="cell">带宽（Hz）</div>
                <div class="cell">强度（Db）</div>
              </div>
              <div class="item" v-for="(item, index) in errorList" :key="index">
                <div class="cell">{{ item.center }}</div>
                <div class="cell">{{ item.width }}</div>
                <div class="cell">{{ item.db }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-window">
          <div class="header">
            <div class="icon three"></div>
            <div class="text">偏差比例</div>
          </div>
          <div class="list">
            <div class="table">
              <div class="item">
                <div class="cell">频率差值</div>
                <div class="cell">带宽差值</div>
                <div class="cell">相似度</div>
              </div>
              <div class="item" v-for="(item, index) in resultList" :key="index">
                <div class="cell">{{ item.center }}</div>
                <div class="cell">{{ item.width }}</div>
                <div class="cell">{{ item.score }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 音频图表 -->
    <div class="audioChart">
      <div class="audioChartTitle">
        声纹信号
      </div>
      <!-- 声纹信号 -->
      <div class="voiceprint">
        <div class="left">
          <div class="soundWave" v-show="isVoiceprint"></div>
          <div class="noChart" v-show="!isVoiceprint"></div>
        </div>
        <div class="center">
          <div class="pitch" v-show="isVoiceprint"></div>
          <div class="noChart" v-show="!isVoiceprint"></div>
        </div>
        <div class="right">
          <div class="soundPress" v-show="isVoiceprint"></div>
          <div class="noChart" v-show="!isVoiceprint"></div>
        </div>
      </div>

      <div class="audioChartTitle">
        振动信号
      </div>
      <!-- 振动信号 -->
      <div class="vibration">
        <div class="left">
          <div class="soundWave2" v-show="isVibration"></div>
          <div class="noChart" v-show="!isVibration"></div>
        </div>
        <div class="center">
          <div class="pitch2" v-show="isVibration"></div>
          <div class="noChart" v-show="!isVibration"></div>
        </div>
        <div class="right">
          <div class="soundPress2" v-show="isVibration"></div>
          <div class="noChart" v-show="!isVibration"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { STable } from '@/components'
  import * as echarts from 'echarts'
  import { list } from '@/api/modular/main/bizstation/bizStationManage'
  import { getBufferByPath, getData, getFaultModelList } from '@/api/modular/system/indexManage'
  import { player } from '@/assets/js/mmplayer'
  import pearson from '@/assets/js/pearson'
  import Spectrogram from '@/components/SpectrogramView/Spectrogram'

  const thresholder = 20
  var myChart

  export default {
    components: {
      STable,
      Spectrogram
    },
    data: function () {
      return {
        url: window.CONST.VUE_APP_API_BASE_FILE_URL,
        fileUrl: '',
        id: 0,
        errorList: [],
        logList: [],
        resultList: [],
        modelList: [],
        pixelRatio: 1.5,
        calcSuccess: 0,
        option: {
          title: {
            text: ' 当前故障对比图',
            show: false,
            textStyle: {
              color: '#19ECFF',
              fontSize: '14',
              fontFamily: '时尚中黑简体',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: '15%',
            right: '10%',
            textStyle: { // 图例文字的样式
              color: '#fff',
              fontSize: 10
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            show: true,
            data: ['检材', '模型']
          },
          grid: {
            top: '10%',
            left: '15%',
            right: '10%',
            bottom: '5%',
            containLabel: false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine: {
              show: true,
              color: '#fff',
              lineStyle: {
                color: '#a1a1a1'
                // color: "#164a72"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#164a72'
              },
              interval: 1
            }
          },
          yAxis: [{
            color: '#fff',
            type: 'value',
            axisLine: {
              show: true,
              color: '#fff',
              lineStyle: {
                color: '#a1a1a1'
                // color: "#164a72"
              }
            },
            axisLabel: {
              show: true,
              color: '#fff'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#164a72',
                interval: 1
              }
            }
          }],
          series: [
            {
              name: '检材',
              type: 'line',
              smooth: true,
              data: []
            },
            {
              name: '模型',
              type: 'line',
              smooth: true,
              data: []
            }
          ]
        },
        errorTime: '',
        fileName: '',
        errName: '未知故障',
        faultName: '',
        modelFileName: [],
        mySoundWave: '',
        mySoundPress: '',
        myPitch: '',
        mySoundWave2: '',
        mySoundPress2: '',
        myPitch2: '',
        audioEchartsDate: [],
        audioTitle: '音频播放',
        groupId: 0,
        modelName: '请选择模型',
        leftData: [],
        rightData: [],
        isVoiceprint: true,
        isVibration: true,
        screenWidth: null,
        spectrogramData: []
      }
    },
    watch: {
      url (newValue, oldValue) {
        if (newValue !== oldValue) {
          this.loadUrl(newValue)
        }
      },
      calcSuccess (newValue) {
        if (newValue === 2) {
          const a = this.logList[0]
          const b = this.errorList[0]
          let highHzIndex = 0
          for (var i = this.leftData.length - 1; i > 0; i--) {
            if (this.leftData[i] > 30) {
              highHzIndex = i
              break
            }
          }
          if (highHzIndex === 0) return

          const mScore = (
            Math.abs(
              pearson.getPearsonBias(
                this.leftData.slice(0, highHzIndex),
                this.rightData.slice(0, highHzIndex)
              ) || 0
            ) * 100
          ).toFixed(2)
          this.resultList = [{
            center: a.center - b.center,
            width: a.width - b.width,
            score: mScore
          }]
          this.calcSuccess = 0
        }
      },
      screenWidth: {
        handler: function (val) {
          if (val > 1680 && val <= 1920) {
            this.pixelRatio = 1.5
          } else if (val > 1500 && val <= 1680) {
            this.pixelRatio = 2
          } else if (val > 1270 && val < 1500) {
            this.pixelRatio = 2.2
          } else {
            this.pixelRatio = 1.3
          }
          this.initWave()
        }
      }
    },
    methods: {
      index () {
        list().then((res) => {
          this.stationList = res.data
        })
      },
      initCharts () {
        var chartDom = document.getElementById('spectrum')
        myChart = echarts.init(chartDom, null, { renderer: 'svg' })
        this.option && myChart.setOption(this.option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        var soundWave2 = document.querySelector('.soundWave2', { renderer: 'svg' })
        this.mySoundWave2 = echarts.init(soundWave2, null, { renderer: 'svg' })
        var soundPress2 = document.querySelector('.soundPress2')
        this.mySoundPress2 = echarts.init(soundPress2, null, { renderer: 'svg' })
        var pitch2 = document.querySelector('.pitch2')
        this.myPitch2 = echarts.init(pitch2, null, { renderer: 'svg' })
      },
      onFFtChnaged (type, buffer) {
        const delta = 8000 / buffer.length
        const xData = []
        for (const i in buffer) {
          xData.push(parseInt(delta * i))
          buffer[i] = parseInt((buffer[i] / 255) * 100)
        }
        this.option.xAxis.data = xData
        if (type === '0') {
          this.option.series[0].data = buffer
          this.calc(type, buffer)
        } else if (type === '1') {
          this.option.series[1].data = buffer
          this.calc(type, buffer)
        }
        this.option && myChart.setOption(this.option)
      },
      calc: function (type, buffer) {
        let lowHz = -1
        let highHz = -1
        const delta = 8000 / buffer.length
        let sumDb = 0
        this.calcSuccess += 1
        for (let i = 0; i < buffer.length; i++) {
          if (buffer[i] > thresholder && lowHz === -1) {
            lowHz = i
          }
          if (lowHz !== -1 && highHz === -1 && buffer[i] < thresholder) {
            highHz = i - 1
            break
          }
        }
        for (let index = lowHz; index <= highHz; index++) {
          sumDb += buffer[index]
        }
        sumDb /= highHz - lowHz
        if (type === '0') {
          this.leftData = buffer
          this.logList = [{
            center: parseInt(delta * ((highHz + lowHz) / 2)),
            width: parseInt(delta * (highHz - lowHz)),
            db: parseInt(sumDb)
          }]
        } else {
          this.rightData = buffer
          this.errorList = [{
            center: parseInt(delta * ((highHz + lowHz) / 2)),
            width: parseInt(delta * (highHz - lowHz)),
            db: parseInt(sumDb)
          }]
          this.calcValue()
        }
      },
      calcValue () {
          const a = this.logList[0]
          const b = this.errorList[0]
          let highHzIndex = 0
          for (var i = this.leftData.length - 1; i > 0; i--) {
            if (this.leftData[i] > 30) {
              highHzIndex = i
              break
            }
          }

        if (highHzIndex === 0) return

          const mScore = (
            Math.abs(
              pearson.getPearsonBias(
                this.leftData.slice(0, highHzIndex),
                this.rightData.slice(0, highHzIndex)
              ) || 0
            ) * 100
          ).toFixed(2)
          this.resultList = [{
            center: a.center - b.center,
            width: a.width - b.width,
            score: mScore
          }]
          this.calcSuccess = 0
      },
      loadUrl (url) {
        this.getWaveBuffer(url, this.setWaveBuffer)
      },
      setWaveBuffer (buff) {
        // this.wavesurfer.empty()
        // this.wavesurfer.loadArrayBuffer(buff)
      },
      calcWave (type, buffer) {
        const row = buffer.length
        const col = buffer[0].length
        const mergeAvg = []
        for (let i = 0; i < col; i++) {
          let ampCount = 0
          for (let j = 0; j < row; j++) {
            ampCount += buffer[j][i]
          }
          mergeAvg.push(ampCount / row)
        }
        this.onFFtChnaged(type, mergeAvg)
      },
      back () {
        this.$router.push({ name: 'Console' })
      },
      paly () {
        player.ini()
        this.audioTitle = '检材播放: ' + this.errName
        player._loadSound(this.url + this.fileUrl)
        // this.wavesurfer.load(this.url + this.fileUrl)
      },
      faultPlay () {
        if (this.modelFileName.length > 0) {
          this.audioTitle = '模型播放: ' + this.faultName
          // this.wavesurfer.load(this.url + this.modelFileName[0])
          player._loadSound(this.url + this.modelFileName[0])
        } else {
          this.$message.warn('请选择故障模型！')
        }
      },
      getFaultModelList () {
        const that = this
        const formData = new FormData()
        formData.append('groupId', that.groupId)
        getFaultModelList(formData).then(res => {
          this.modelList = res.data
          for (let i = 0; i < that.modelList.length; i++) {
            if (that.errName === that.modelList[i].faultName) {
              that.modelName = that.errName
              that.getException(that.modelList[i])
            }
            break
          }
        })
      },
      getException (item) {
        const that = this
        this.faultName = item.faultName
        this.modelFileName = item.modelFile.split(',')
        console.log(this.url + this.modelFileName[0])
        // that.wavesurfer.load(this.url + this.modelFileName[0])
        const formData = new FormData()
        formData.append('fileName', '/' + this.modelFileName[0])
        getBufferByPath(formData).then(res => {
          if (res.success) {
            that.calcWave('1', res.data[0].data)
          }
        })
      },
      getScreenWidth () {
        window.onresize = () => {
          const screenWidth = document.body.clientWidth
          this.screenWidth = screenWidth
        }
      },
      initWave () {
        // const that = this
        // that.wavesurfer = WaveSurfer.create({
        //   container: that.$refs.waveform,
        //   cursorColor: '#33fff7', // 光标颜色
        //   waveColor: '#33fff7', // 光标后颜色
        //   progressColor: '#409EFF', // 未播放的光标颜色
        //   // backend: 'MediaElement',
        //   mediaControls: false,
        //   hideScrollbar: true, // 隐藏滚动条
        //   responsive: true,
        //   audioRate: '1',
        //   pixelRatio: 1.95,
        //   // height: 256,
        //   splitChannels: false,
        //   fillParent: true,
        //   scrollParent: true,
        //   plugins: [
        //     SpectrogramPlugin.create({
        //       container: '#container',
        //       labels: true,
        //       colorMap: that.colorMap,
        //       deferInit: false, // 延迟初始化， that.wavesurfer.initPlugin('spectrogram')初始化
        //       pixelRatio: that.pixelRatio,
        //       fftSamples: 512,
        //       sampleRate: 16000,
        //       noverlap: 64,
        //       windowFunc: 'hann'
        //     })
        //   ]
        // })
        // that.wavesurfer1 = WaveSurfer.create({
        //   container: '#wavesurfer',
        //   plugins: [
        //     SpectrogramPlugin.create({
        //       container: '#container1',
        //       labels: true,
        //       colorMap: that.colorMap,
        //       deferInit: false, // 延迟初始化， that.wavesurfer.initPlugin('spectrogram')初始化
        //       pixelRatio: 1.5,
        //       fftSamples: 512,
        //       sampleRate: 16000,
        //       noverlap: 64,
        //       windowFunc: 'hann'
        //     })
        //   ]
        // })
      },
      getFileInfo () {
        this.$nextTick(() => {
          const that = this
          if (that.fileUrl !== '') {
            // that.wavesurfer.empty()
            that.audioTitle = '检材播放: ' + that.errName
            this.paly()
            // that.wavesurfer.load(that.url + that.fileUrl)
            const formData = new FormData()
            formData.append('fileName', '/' + this.fileUrl)
            that.initSoundWave()
            that.initPitch()
            that.initSoundPress()
            getBufferByPath(formData).then(res => {
              if (res.success) {
                that.calcWave('0', res.data[0].data)
              }
            })
            getData(formData).then(res => {
              if (res.success) {
                that.audioEchartsDate = res.data
                this.updateSoundWave()
                this.updatePitch()
                this.updateSoundPress()
                this.spectrogramData = that.audioEchartsDate[3].yData
              }
            })
          }
        })
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      initSoundWave () {
        var soundWave = document.querySelector('.soundWave')
        this.mySoundWave = echarts.init(soundWave, null, { renderer: 'svg' })
      },
      updateSoundWave () {
        var option = {
          title: {
            text: '波形图',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontSize: '16px',
              fontFamily: '时尚中黑简体',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '14%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: this.audioEchartsDate[0].xData,
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            width: 0.5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: this.audioEchartsDate[0].yData,
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#FC8A74',
                width: 1
              }
            }
          ]
        }
        this.mySoundWave.setOption(option)
        const that = this
        window.addEventListener('resize', function () {
          that.mySoundWave.resize()
        })
      },
      initPitch () {
        var pitch = document.querySelector('.pitch')
        this.myPitch = echarts.init(pitch, null, { renderer: 'svg' })
      },
      updatePitch () {
        var option = {
          title: {
            text: '时频谱',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontSize: '16px',
              fontFamily: '时尚中黑简体',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '10%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: this.audioEchartsDate[1].xData,
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: this.audioEchartsDate[1].yData,
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#66E9F9',
                width: 1
              }
            }
          ]
        }
        this.myPitch.setOption(option)
        const that = this
        window.addEventListener('resize', function () {
          that.myPitch.resize()
        })
      },
      initSoundPress () {
        var soundPress = document.querySelector('.soundPress')
        this.mysoundPress = echarts.init(soundPress, null, { renderer: 'svg' })
      },
      updateSoundPress () {
        var option = {
          title: {
            text: '声压谱',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontFamily: '时尚中黑简体',
              fontSize: '16px',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '10%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: this.audioEchartsDate[2].xData,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 1
              }
            }
          },
          series: [
            {
              data: this.audioEchartsDate[2].yData,
              type: 'line',
              symbol: 'none',
              showBackground: true,
              backgroundStyle: {
                color: '#344F85'
              },
              itemStyle: {
                color: '#C3E9F7',
                width: 1
              }
            }
          ]
        }
        this.mysoundPress.setOption(option)
        const that = this
        window.addEventListener('resize', function () {
          that.mysoundPress.resize()
        })
      },
      updateSoundWave2 () {
        var option = {
          title: {
            text: '波形图',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontFamily: '时尚中黑简体',
              fontSize: '16px',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '10%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            width: 0.5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: [7, 6, 5, 12, 1, 3, 66],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#FC8A74',
                width: 1
              }
            }
          ]
        }
        this.mySoundWave2.setOption(option)
        window.addEventListener('resize', () => {
          this.mySoundWave2.resize()
        })
      },
      updatePitch2 () {
        var option = {
          title: {
            text: '频谱图',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontFamily: '时尚中黑简体',
              fontSize: '16px',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '10%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            width: 0.5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: [7, 6, 5, 12, 1, 3, 66],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#FC8A74',
                width: 1
              }
            }
          ]
        }
        this.myPitch2.setOption(option)
        window.addEventListener('resize', () => {
          this.myPitch2.resize()
        })
      },
      updateSoundPress2 () {
        var option = {
          title: {
            text: '加速度',
            top: '4px',
            right: '10px',
            textStyle: {
              color: '#66E9F9',
              fontFamily: '时尚中黑简体',
              fontSize: '16px',
              fontWeight: 'normal'
            }
          },
          grid: {
            left: '10%',
            right: '6%',
            bottom: '20%',
            top: '20%'
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            width: 0.5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              data: [7, 6, 5, 12, 1, 3, 66],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#FC8A74',
                width: 1
              }
            }
          ]
        }
        this.mySoundPress2.setOption(option)
        window.addEventListener('resize', () => {
          this.mySoundPress2.resize()
        })
      }
    },
    created () {
      this.fileUrl = this.$route.query.fileUrl
      this.errName = this.$route.query.errName
      this.groupId = this.$route.query.groupId
      const srceenWidth = document.body.clientWidth
      if (srceenWidth > 1680 && srceenWidth <= 1920) {
        this.pixelRatio = 1.5
      } else if (srceenWidth > 1500 && srceenWidth <= 1680) {
        this.pixelRatio = 2
      } else if (srceenWidth > 1270 && srceenWidth < 1500) {
        this.pixelRatio = 2.2
      } else {
        this.pixelRatio = 1.3
      }
    },
    mounted () {
      this.getScreenWidth()
      this.initWave()
      this.initCharts()
      this.getFaultModelList()
      this.getFileInfo()
      this.updateSoundWave2()
      this.updatePitch2()
      this.updateSoundPress2()
      window.onresize = () => {
        this.screenWidth = document.body.clientWidth
      }
    },
    destroyed () {
      // this.wavesurfer.empty()
      // this.wavesurfer1.empty()
      if (player.source) {
        player.stop()
      }
    }
  }
</script>
<style scoped="scoped" lang="scss">
  @import "../../../assets/scss/contrastDetail.scss";
</style>
